<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>档案详情</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="../../css/receive.css">
    <link rel="stylesheet" href="../../iconfont/iconfont.css">
</head>

<body>
    <div class="bodyBox">
        <!--数据表格-->
        <table class="layui-hide" id="tableId" lay-filter="tableId">
        </table>
        <!-- 操作 -->
        <div id="userBar" style="display: none;">
            <a class="layui-btn layui-btn-xs check" lay-event="edit" title="查看">
                <i class="iconfont">
                    &#xe613;
                </i>
            </a>
            <a class="layui-btn layui-btn-xs edit" lay-event="upda" title="归还">
                <i class="iconfont">
                    &#xe61a;
                </i>
            </a>
        </div>

    </div>


    <script src="../../layui/layui.all.js"></script>
    <script src="../../js/receive.js"></script>
    <script>
        var tableIns;
        var data;
        layui.use(['jquery', 'element', 'layer', 'form', 'table', 'laydate',], function () {
            var $ = layui.$,
                form = layui.form,
                table = layui.table,
                layer = layui.layer,
                laydate = layui.laydate
            var iframe = document.getElementById('newAdd');
            tableIns = table.render({
                elem: '#tableId'   //渲染的目标对象
                , url: '../../../data/data.json' //数据接口
                , title: '档案详情表'//数据导出来的标题
                , height: 'full-200'
                , cellMinWidth: 80 //设置列的最小默认宽度
                , page: 1  //是否启用分页, limits: [10, 20, 30]
                , limits: [10, 50, 100]
                , limit: 10//默认采用3
                , where: {
                    type: 2,
                }
                , cols: [[   //列表数据
                    { type: "checkbox" }
                    , { field: 'id', title: '', align: 'center', hide: true }
                    , { field: 'coding', title: '档案编码', align: 'center', event: 'setCode', style: 'color:#2f81ff' }
                    , { field: 'recordname', title: '姓名', align: 'center', event: 'setName', style: 'color:#2f81ff' }
                    , { field: 'idnumber', title: '身份证号', align: 'center', event: 'setNum', style: 'color:#2f81ff' }
                    , { field: 'danganzhuangtai', title: '档案类型', align: 'center' }
                    , { field: 'ghrq', title: '归还时间', align: 'center', }
                    , { fixed: 'right', title: '操作', toolbar: '#userBar', align: 'center' }
                ]], done: function (res, curr, count) {
                    $('th').css({
                        'background-color': '#d3e0f4',
                    })
                }
            })
            //打开查看
            function edit(data) {
                layer.open({
                    type: 2,
                    title: '查看',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['1200px', '600px'],
                    content: '../comHtml/check.html'
                });
            }
            //监听行工具事件
            table.on('tool(tableId)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent === 'edit') { //编辑
                    edit(data)
                }

            });

        })
        function child(data) {
            console.log(data)
            //上述方法等价于
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    type: data
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            }); //只重载数据
        }


    </script>
</body>

</html>